<template>
  <div class="app-container">
    <el-row >
      <el-card class="box-card">
        <div>
          <span @click="$router.back(-1)"><i class="el-icon-back">返回</i></span>
        </div>
      </el-card>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8" :xs="24">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <stuAvatar :stuId="stuId" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />姓名
                <div class="pull-right">{{ stuInfo.stuName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="number" />学号
                <div class="pull-right">{{ stuInfo.stuNo }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="user" />性别
                <div class="pull-right">
                  <span v-if="stuInfo.sex == 0">男</span>
                  <span v-if="stuInfo.sex == 1">女</span>
                  <span v-if="stuInfo.sex == 2">未知</span>
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ stuInfo.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">{{ stuInfo.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />学校
                <div class="pull-right" >{{ stuInfo.college }} </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />学院专业
                <div class="pull-right" >{{ stuInfo.institute }} / {{ stuInfo.major }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />班级
                <div class="pull-right" >{{ stuInfo.stuClass }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />政治面貌
                <div class="pull-right">{{ stuInfo.political }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />家庭地址
                <div class="pull-right">{{ stuInfo.location }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />入学时间
                <div class="pull-right">{{ stuInfo.birthday }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />出生日期
                <div class="pull-right">{{ stuInfo.admissionTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" :xs="24">
        <el-card >
          <el-tabs v-model="activeTab">
            <el-tab-pane label="父母信息" name="parentInfo">
              <parentInfo :parentInfo="parentInfo" />
            </el-tab-pane>
            <el-tab-pane label="参项信息" name="actUserList">
              <actusers :actUserList="actUserList" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import parentInfo from "./parentInfo";
  import actusers from "./actusers";
  import stuAvatar from "./stuAvatar";
  import {  getStuDetail} from "@/api/manage/stuinfo";

    export default {
      name: "studetail",
      components: { stuAvatar, actusers,parentInfo },
      data() {
        return {
          activeTab: "parentInfo",
          stuInfo:{},
          parentInfo:{
            id:'',
            stuId:'',
            fName:'',
            mName:'',
            fUnit:'',
            mUnit:'',
            fPhone:'',
            mPhone:'',
            fJob:'',
            mJob:''
          },
          college:'',
          institute:'',
          major:'',
          actUserList:[],
          stuId:'',
        };
      },
      created() {
        this.stuId = this.$route.query.stuId
        this.getStuInfo(this.stuId)
      },
      methods: {
        getStuInfo(id){
          getStuDetail(id).then(response => {
            this.stuInfo = response.data.studentInfo
            this.actUserList = response.data.actUserList
            if(response.data.parentInfo != null){
              this.parentInfo = response.data.parentInfo
            }
          })
        },
      }
    }
</script>

<style scoped>
  .el-row {
    margin-bottom: 10px;
  }
</style>
